<template>
  <div class="app-container">
    <div style="margin-bottom: 15px">
      <el-select clearable v-model="courseId" placeholder="课程名称">
        <el-option v-for="(item,index) in courseList" :key="item.id" :value="item.id" :label="item.name"></el-option>
      </el-select>

      <el-date-picker style="width: 280px;margin: 0 15px" v-model="timeList" value-format="yyyy-MM-dd" type="daterange"
                      align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      :picker-options="pickerOptions">
      </el-date-picker>

      <el-button style="margin-right: 30px" type="primary" @click="searchData">检索</el-button>

      <!--<el-input style="width: 250px;margin: 0 15px" disabled v-model="signInCode" placeholder="签到码" />-->
      <el-input ref="signInCode" type="password" autofocus="autofocus"
                style="width: 250px;margin: 0 15px;position: fixed;top: -1000000px"
                @blur="onInputBlur" @focus="onInputFocus"
                @keyup.enter.native="submitCode" v-model="signInCode" placeholder="签到码" />



      <div style="display: inline-block">
        <el-input type="text" style="width: 250px;margin: 0 15px;position: relative;top: 0;left: 0" v-model="tempCode" placeholder="签到码" />
        <div @click="focusClick" style="display: inline-block;width: 300px;cursor: pointer;height: 40px;position: relative;top: 15px;left: -280px;z-index: 9999999"></div>
      </div>
      <el-button :type="this.isFocus?'success':'danger'" style="margin-left: -300px" @click="focusClick">{{this.isFocus?'请扫码':'扫码签到'}}</el-button>

    </div>
    <div class="tableClass">
      <el-table :data="tableList" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
                style="width: 100%;">
        <el-table-column align="center" prop="id" label="序号" />
        <el-table-column align="center" prop="photo_url" label="头像">
          <template slot-scope="scope">
            <el-button type="text" size="medium">
              <img style="width: 50px;height: 50px;border-radius: 50%" :src="scope.row.user_info.photo_url" />
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="user_info.nickname" label="用户昵称" />
        <el-table-column align="center" prop="user_info.realname" label="用户姓名" />
        <el-table-column align="center" prop="user_info.phone" label="手机号码"></el-table-column>
        <el-table-column align="center" prop="user_info.company_name" label="公司名称" />
        <el-table-column align="center" prop="course_info.name" label="课程名称" />
        <el-table-column align="center" prop="course_info.check_in_integral" label="签到积分" />
        <el-table-column align="center" prop="created_at" label="签到时间" />
        <!--<el-table-column label="操作" align="center" width="230px">
          <template slot-scope="scope">
          </template>
        </el-table-column>-->
      </el-table>
      <br>
      <!-- 分页 -->
      <div style="text-align: center;">
        <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="limit" :total="total" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        tableList: [],
        courseList: [],
        total: 0, //总行数
        limit: 8, //每页几行
        page: 1, //起始页
        signInCode: '',
        type: 'password',
        isFocus: false,
        courseId: '',
        timeList: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        start_time: '',
        end_time: '',
        tempCode: ''
      }
    },
    watch: {
      signInCode(val) {
        if(val){
          this.type = 'text'
        } else{
          this.type = 'password'
        }
      },
      courseId() {
        this.page = 1
        this.getCourseSignRecord()
      }
    },
    mounted() {
      /*this.$refs.signInCode.focus()*/
      this.getCourseSignRecord()
      this.getCourseList()
    },
    methods: {

      searchData() {
        if(this.timeList !=null){
          this.start_time = this.timeList[0]
          this.end_time = this.timeList[1]
        } else {
          this.start_time = ''
          this.end_time = ''
        }
        this.page = 1
        this.getCourseSignRecord()
      },

      onInputBlur() {
        this.isFocus = false
        console.log('失去')
      },

      onInputFocus() {
        this.isFocus = true
        console.log('聚焦')
      },

      focusClick() {
        this.$refs.signInCode.focus()
      },

      //获取分页列表
      getCourseSignRecord() {
        let params = {
          "page": this.page,
          "limit": this.limit,
          course_id: this.courseId,
          start_time: this.start_time,
          end_time: this.end_time
        }
        //调用后台提供的接口方法
        this.$api.getCourseSignRecord(params).then(res => {
          console.log(res.data.data)
          if (res.data.level == "success") {
            this.tableList = res.data.data
            this.total = res.data.page_info.total
            this.loading = false
          }else {
            this.$message.error(res.data.message)
            this.loading = false
          }

        })
      },

      //获取课程列表
      getCourseList() {
        let params = {
          page: 1,
          limit: 9999,
          study_type: 'come',
          need_check_in: 1
        }
        //调用后台提供的接口方法
        this.$api.getCourseList(params).then(res => {
          if (res.data.level == "success") {
            this.courseList = res.data.data
          }else {
            this.$message.error(res.data.message)
          }

        })
      },

      async courseSign(code) {
        this.$api.courseSign({payload: code}).then(res => {
          if(res.data.level=="success"){
            this.$message.success('签到成功')
            this.getCourseSignRecord()
          } else{
            this.$message.error(res.data.message)
          }
        }).catch(err => {
          this.$message.error('网络错误')
        })
      },

      //分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        this.page = page
        this.loading = true
        //调用获取列表的方法
        this.getCourseSignRecord()
      },

      submitCode() {
        console.log(this.signInCode)
        this.tempCode = this.signInCode
        this.signInCode = ''
        this.courseSign(this.tempCode)
      }

    }
  }
</script>
<style scoped="scoped">
  /deep/.el-card__header {
    background-color: #409EFF;
    color: whitesmoke;
  }

  /deep/.el-dialog {
    margin-top: 10vh !important;
    width: 33%;
  }

  .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }
</style>
